<!DOCTYPE html>
<html manifest='server/info.manifest'>
<head>
	<meta charset="UTF-8">
	<title>19_ajax</title>
	<base target="blank">
	<style>
		#konwledege{
			position: fixed;
			right: 2%;
			top:2%;
			text-decoration:underline;
			color:inherit;
			outline: none;
			color: orange;
			font-size: 12px;
		}
		#toTop{
			position: fixed;
			right: 2%;
			bottom: 2%;
			box-shadow: 1px 1px 1px rgba(0,0,0,.5);
			border-radius: 100%;
			width: 40px;
			height: 40px;
			line-height: 40px;
			font-size: 12px;
			text-align: center;
			color: red;
			z-index: 9999;
		}
		*{margin:0;padding: 0;}
		body{
			font-family: 'Microsoft yahei', Verdana, '仿宋',Arial, Helvetica, sans-serif;
			font-size: 18px;
			max-width: 1000px;
			margin: auto;
			position: relative;
		}
		a{text-decoration:none;color:inherit;outline: none;}
		img{border:none;vertical-align: middle;outline:none;}
		li{list-style:none;}
		
		section{
			position: relative;
			margin:50px auto;
		}
		section>h2{
			margin-bottom: 25px;
			text-align: center;
		}
		/*------------------------------jd-----------------------------------*/
		.cache img{
			width: 150px;
		}
		.cache div{
			white-space:pre-wrap;
		}
	</style>
</head>
<body>
	<div id="konwledege"><a href="baseKnowledege.html" target="_self">基本知识</a></div>
	<a href="#" id='toTop'>Top</a>
	<secttion class="upload">
		<h2>上传文件</h2>
		<div class="wrap">
			<input type="file" id="input">
		    <input type="button" id="btn" value="上传">
		    <div>
		        <progress id="bar" value="0" max="100"></progress>
		        <p id="op">0%</p>
		    </div>
		</div>

	</secttion>
	<section class="web-worker">
		<input type="button" value='生成'>
		<textarea name="char" id="" cols="100" rows="8"></textarea>
	</section>
	<section class="cache">
		<img src="server/uploads/big6.jpg" alt="">
		<img src="server/uploads/s2.jpg" alt="">
		<img src="server/uploads/s7.jpg" alt="">
		我们正在测试离线 存储
		<div >
			1. 修改服务器配置 apache[httpd.conf]
		</div>
	</section>
	<script>
		(function(){
			var btn = document.getElementById('btn');
			var xhr = new XMLHttpRequest();
			var bar = document.getElementById('bar');
			var op = document.getElementById('op');
			var input = document.getElementById('input');

			btn.onclick = function(){
				xhr.open('post','server/postFile.php',true);
				xhr.setRequestHeader('X-Request-width','XMLHttpRequest');

				xhr.upload.onprogress = function(){

				};
				xhr.upload.onprogress = function(e){
					var prop = e.loaded / e.total;
					bar.value = bar.max*prop;
					op.innerHTML = bar.value.toFixed(0) + '%';
					op.style.width = bar.value + 'px';
				};
				var oFormData = new FormData();
            	oFormData.append('file',input.files[0]);

				xhr.send(oFormData);

				xhr.onload = function(){
					console.log(xhr.responseText);
				};
			};
		})();

		(function(){
			var btn = document.querySelector('.web-worker input');
			var w = new Worker('server/work.js');
			var txt = document.querySelector('.web-worker textarea');
			var num = 2000;
			btn.onclick = function(){
				w.postMessage(num);
			};
			w.onmessage = function(e){
				txt.value = e.data;
			};
		})();

		

	</script>

</body>
</html>